<template>
  <div class="detectionPage">
    <el-card shadow="always" style="margin-bottom: 25px">
      <div class="upload">
        <upload
          :action="'http://localhost:8080/files/upload/img'"
          :accept="'image/*'"
          :uploadText="'点击上传待检测图片'"
          :fileList="fileList1"
          @onChange="onChange1"
          @onSuccess="onSuccess1"
          @onExceed="onExceed1"
          @onRemove="onRemove1"
        ></upload>
      </div>
    </el-card>
    <el-card shadow="always" style="margin-bottom: 25px">
      <div class="upload">
        <upload
          :action="'http://localhost:8080/files/upload/mode'"
          :accept="'.pt'"
          :uploadText="'点击上传检测模型'"
          :uploadTip="'请上传检测模型,最多上传一个'"
          :listType="'text'"
          :fileList="fileList2"
          @onChange="onChange2"
          @onSuccess="onSuccess2"
          @onExceed="onExceed2"
          @onRemove="onRemove2"
        ></upload>
      </div>
    </el-card>
    <el-card shadow="always" style="margin-bottom: 20px">
      <div>
        <el-button type="primary" plain @click="beginCheck">开始检测</el-button>
      </div>
    </el-card>
    <el-card shadow="always">
      <div class="checkResultBox">
        <div class="leftArea">
          <div class="title">
            检测结果：<b>{{ checkResult.runTime }}</b
            >ms
          </div>
          <el-divider></el-divider>
          <div class="tableBox">
            <div class="header">
              <div>序号</div>
              <div>类别</div>
              <div>置信度</div>
              <div>xmin</div>
              <div>xmax</div>
              <div>ymin</div>
              <div>ymax</div>
            </div>
            <div class="t_body" v-if="checkResultShow">
              <div
                class="bodyItem"
                v-for="(item, index) in checkResult.detail"
                :key="index"
              >
                <div>{{ index }}</div>
                <div>{{ item.type }}</div>
                <div>{{ item.confidence_level }}</div>
                <div>{{ item.xmin }}</div>
                <div>{{ item.xmax }}</div>
                <div>{{ item.ymin }}</div>
                <div>{{ item.ymax }}</div>
              </div>
            </div>
            <div class="t_body nodata" v-else>
              <el-empty description="暂无结果" :image-size="100"></el-empty>
            </div>
          </div>
        </div>
        <div class="rightArea">
          <el-image
            v-if="checkResultShow"
            style="width: 550px; height: 250px"
            :src="'http://localhost:8080/image/' + checkResult.imgUrl"
            :preview-src-list="newImgUrlList"
          >
          </el-image>
          <el-empty
            v-else
            description="暂无结果图"
            :image-size="100"
          ></el-empty>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import upload from "@/components/upload";
export default {
  name: "",
  data() {
    return {
      fileList1: [
        // {
        //   name: "food.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
      ],
      fileList2: [
        // {
        //   name: "food.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
      ],
      checkResult: {},
      checkResultShow: false,
      newImgUrl: "",
      newImgUrlList: [],
    };
  },
  components: { upload },
  created() {},
  mounted() {},

  methods: {
    onChange1(val) {
      //   console.log(">>>>valvalvava111111", val);
      this.fileList1.push({ name: val.name, url: val.url });
    },
    onRemove1() {
      this.fileList1 = [];
    },
    onSuccess1(val) {
      //   this.fileList1.push({ name: val.name, url: val.url });
      this.fileList1 = val;
    },
    onExceed1() {
      this.$message.warning(`最多上传1张图片`);
    },

    onChange2(val) {
      //   console.log(">>>>valvalvava222222", val);
      this.fileList2.push({ name: val.name, url: val.url });
    },
    onRemove2() {
      this.fileList2 = [];
    },
    onSuccess2(val) {
      //   this.fileList2.push({ name: val.name, url: val.url });
      this.fileList2 = val;
    },
    onExceed2() {
      this.$message.warning(`最多上传1个模型`);
    },
    beginCheck() {
      //   console.log(this.fileList1, this.fileList2, ">><<>><<>><<>><<");
      if (this.fileList1.length == 0 || this.fileList2.length == 0) {
        this.$message.error("还有文件未上传！");
      } else {
        const loading = this.$loading({
          lock: true,
          text: "提交成功！正在努力检测中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        axios
          .post(
            `http://localhost:8080/user/runTeaMode/${
              JSON.parse(sessionStorage.getItem("userData")).id
            }`
          )
          .then((res) => {
            if (res.code == 1) {
              loading.close();
              this.$message({
                message: "检测成功,检测结果已出!!!",
                type: "success",
              });
              //   console.log(res, "res==>检测结果检测结果--借过借过");
              this.checkResult = res.data;
              this.newImgUrlList.push(
                "http://localhost:8080/image/" + res.data.imgUrl
              );
              this.checkResultShow = true;
            }
          });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.detectionPage {
  .checkResultBox {
    display: flex;
    // justify-content: space-between;

    .leftArea {
      width: 50%;
      margin-right: 10%;
      .title {
        // border: 1px solid black;
        font-size: 20px;
      }
      /deep/.el-divider--horizontal {
        margin: 15px 0;
      }
      display: flex;
      flex-direction: column;
      .tableBox {
        // width: 50%;
        height: 200px;
        .header {
          display: flex;
          margin-bottom: 5px;
          > div {
            text-align: center;
            font-weight: 700;
          }
          div:nth-child(1) {
            width: 10%;
          }
          div:nth-child(2) {
            width: 15%;
          }
          div:nth-child(3) {
            width: 15%;
          }
          div:nth-child(4) {
            width: 15%;
          }
          div:nth-child(5) {
            width: 15%;
          }
          div:nth-child(6) {
            width: 15%;
          }
          div:nth-child(7) {
            width: 15%;
          }
        }
        .t_body {
          height: 150px;
          overflow-y: auto;
          .bodyItem {
            display: flex;
            > div {
              height: 30px;
              line-height: 30px;
              text-align: center;
              border: 1px solid #ccc;
            }
            div:nth-child(1) {
              width: 10%;
            }
            div:nth-child(2) {
              width: 15%;
            }
            div:nth-child(3) {
              width: 15%;
            }
            div:nth-child(4) {
              width: 15%;
            }
            div:nth-child(5) {
              width: 15%;
            }
            div:nth-child(6) {
              width: 15%;
            }
            div:nth-child(7) {
              width: 15%;
            }
          }
        }
        .nodata {
          height: 200px;
          .el-empty {
            padding: 10px 0 0 !important;
          }
        }
      }
    }
    .rightArea {
      width: 35%;
      //   width: 550px;
      //   height: 250px;
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
::-webkit-scrollbar {
  width: 5px;
  height: 8px;
}
// 滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 4px;
}
</style>
